<template>
	<view class="top-window-header">
		<view class="left-header logo">
			<navigator class="logo" open-type="reLaunch" url="/pages/component/view/view">
				<image src="../static/logo.png" mode="heightFix" style="width: 30px;"></image>
				<text>hello uni-app</text>
			</navigator>
		</view>
		<!-- <custom-tab-bar class="tab-bar-flex" direction="horizontal" :show-icon="false" :selected="current"
			@onTabItemTap="toSecondMenu" /> -->
			<view>
				<u-modal title="新增笔记本" :show="addFolderShow" :showCancelButton="true" closeOnClickOverlay @confirm="addFolderConfirm" @cancel="() => (addFolderShow = false)">
					<u--input placeholder="笔记本名称" border="surround" v-model="newFolder"></u--input>
				</u-modal>
			</view>
			
		
			<view class="flex justify-between margin-right-sm head-right">
				<u--image src="/static/icon/addFile.png" width="25px" height="25px" @tap="newFolderClick"></u--image>
				<!-- <u--image src="/static/icon/personal.png" width="25px" height="25px" @tap="toMine"></u--image> -->
			</view>
		<button @click="logout">退出</button>
	</view>
</template>

<script>
	
	import http from '../common/request.js' 
	
	export default {
		data() {
			return {
				selected: {
					first: 0,
					workbench: 1,
					mine: 2
				},
				current: 0,
				addFolderShow: false,
				newFolder: '笔记本名称',
				indexPage: []
			}
		},
		watch: {
			$route: {
				immediate: true,
				handler(newRoute) {
					const width = uni.getSystemInfoSync().screenWidth
					if (width >= 768) {
						let path = newRoute.path
						let comp
						if (path === '/') {
							comp = 'first'
							path = '/pages/home/home'
						} else {
							comp = path.split('/')[2]
						}
						this.current = this.selected[comp]
						for (const item of this.indexPage) {
							if (path === item.tabBar) {
								uni.redirectTo({
									url: item.index
								})
								
							}
						}
					}
				}
			}
		},
		mounted() {},
		methods: {
			toSecondMenu(e) {
				const activeTabBar = '/' + e.pagePath
				for (const item of this.indexPage) {
					if (activeTabBar === item.tabBar) {
						uni.redirectTo({
							url: item.index
						})
					}
				}
			},
			logout(){
				uni.showModal({
				                title: '确认退出',
				                content: '您确定要退出当前账号吗？',
				                success: (res) => {
				                    if (res.confirm) {
				                        this.isLoading = true;
				                        
				                        // 模拟退出登录API调用
				                        setTimeout(() => {
				                            try {
				                                // 清除本地存储的用户信息
				                                uni.removeStorageSync('userInfo');
				                                uni.removeStorageSync('loginTime');
				                                uni.removeStorageSync('token');
				                                
				                                // 跳转到登录页
				                                uni.reLaunch({
				                                    url: '/pages/login/login'
				                                });
				                            } catch (e) {
				                                console.error('清除缓存失败', e);
				                                uni.showToast({
				                                    title: '退出登录失败',
				                                    icon: 'none'
				                                });
				                            } finally {
				                                this.isLoading = false;
				                            }
				                        }, 800);
				                    }
				                }
				            });
			},
			// 新增文件夹
			newFolderClick() {
				 this.addFolderShow = true;
				//this.$refs.inputDialog.open();
			},
			// 新增文件夹-点击确认按钮触发以后
			// 注意：我这没做操作
			addFolderConfirm() {
				this.addFolderShow = false;
				// 确认以后关闭弹窗 + 清空默认展示条件
				//this.newFolder = '笔记本名称';
				http.requestWithToken({
					url: '/notebook',
					method: 'POST',
					data: {
						notebook: this.newFolder
					}
				}).then((data) => {
						console.log('创建笔记本成功');
						this.$globalData.menuAdd++;
						console.log('$globalData:', this.$globalData);
					})
					.catch(error => {
						// 错误提示
						uni.showToast({
							title: '创建失败',
							icon: 'none'
						});
					});
			}
		}
	}
</script>

<style>
	.top-window-header {
		height: 60px;
		padding: 0 15px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		border-bottom: 1px solid #e1e1e1;
		background-color: #FFFFFF;
		color: #333;
	}
	
	.logo {
		display: flex;
		flex-direction: row;
		align-items: center;
		flex: 1;
	}
	
	.logo image {
		height: 30px;
		width: 30px;
	}
	
	.logo text {
		margin-left: 8px;
	}
	
	.right-header {
		display: flex;
		flex-direction: row;
		color: #333;
	}
	
	.right-header-item {
		line-height: 25px;
		margin-left: 40px;
		cursor: pointer;
		font-size: 16px;
	}
	
	.active {
		color: #4cd964;
		border-bottom: 2px solid;
	}
	
	.tab-bar-flex {
		width: 360px;
	}
	
	.phone-link {
		padding-left: 20px;
		cursor: pointer;
	}
	
	.new-icon {
		margin-left: -3px;
		/* margin-right: 5px; */
		margin-top: -20px;
	}
</style>